<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ThreeJs坐标系</title>
    <script src="lib/three.js"></script>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script>
        //创建一个场景
        var scene = new THREE.Scene();
        //创建一个 Buffer类型几何体对象
        var geometry = new THREE.BufferGeometry();
        //类型数组创建顶点数据
        var  vertices = new Float32Array([
            0,0,0,//顶点1坐标
            50,0,0,//顶点2坐标
            0,100,0,//顶点3坐标
            0,0,10,//顶点4坐标
            0,0,100,//顶点5坐标
            50,0,10,//顶点6坐标
        ]);
        //创建属性缓冲区对象
        var attribute = new THREE.BufferAttribute(vertices,3);//3个为一组，表示一个顶点的 xyz 坐标
        //设置几何体 attribute 属性的位置属性
        geometry.attributes.position = attribute;
        //三角面（网格）渲染模式
        var material = new THREE.MeshBasicMaterial({
            color:0x0000ff,//三角面的颜色
            side:THREE.DoubleSide //两面可见
        });//材质对象
        var mesh = new THREE.Mesh(geometry,material);
        //将网格模型添加到场景中
        scene.add(mesh);
        //显示三维坐标轴
        var axesHelper = new THREE.AxesHelper(200);
        scene.add(axesHelper);
        // 光源设置

        //点光源
        var point = new THREE.PointLight(0xffffff);
        //点光源位置
        point.position.set(400,200,300);
        //点光源添加到场景中
        scene.add(point);
        //环境光
        var ambient = new THREE.AmbientLight(0xffffff);
        //环境光添加到场景中
        scene.add(ambient);
        //相机设置
        var width = window.innerWidth;//窗口宽度
        var height = window.innerHeight;//窗口高度 
        var k = width/height;//窗口宽高比
        //三维场景显示范围控制系数，系数越大，显示范围越大
        var s = 200;
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000);
        //设置相机位置
        camera.position.set(200,300,200);
        //设置相机方向（指向的场景对象）
        camera.lookAt(scene.position);
        //创建 渲染器对象
        var renderer = new THREE.WebGLRenderer();
        //设置渲染区域
        renderer.setSize(width,height);
        //设置背景颜色
        renderer.setClearColor(0xb9d3ff,1);
        //向body元素中插入 canvas 对象
        document.body.appendChild(renderer.domElement);
        //执行渲染操作：指定场景，相机作为参数
        renderer.render(scene,camera);
    </script>
</body>
</html>